<template>
    <el-container>
        <el-header>
                <span id="logo" style="display: inline-block;width: 50%;height: 100%;float: left">
                     <a href="https://www.bilibili.com/video/BV14g41197PY/"><img src="../assets/9e1.webp" height="100%"
                                                                                 width="180px"></a>
                </span>
            <span id="avatar" style="float: right">
                    <el-dropdown @command="handleCommand">
                  <span class="el-dropdown-link" style="margin-top: 10px; display: inline-block;">
                    <el-avatar :src="loginAvatar"></el-avatar>
                  </span>
                    <el-dropdown-menu slot="dropdown" style="margin-top: -10px">
                        <el-dropdown-item command="info">个人信息</el-dropdown-item>
                        <el-dropdown-item command="updatePassword">修改密码</el-dropdown-item>
                        <el-dropdown-item command="logout">退出登录</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
                </span>


        </el-header>
        <el-container>
            <el-aside width="200px">
                <el-menu
                        default-active="2"
                        class="el-menu-vertical-demo"
                        background-color="#545c64"
                        text-color="#fff"
                        :router="true"
                        unique-opened="unique-opened"
                        active-text-color="#ffd04b">
                    <!--使用组件-->
                    <LeftMenu :menu-data="leftMenus"></LeftMenu>
                </el-menu>
            </el-aside>
            <el-main>
                <!--             修改密码-->
                <el-dialog
                        title="修改密码"
                        :visible.sync="updatePasswordDialogVisible"
                        width="30%"
                >
                    <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                        <el-form-item label="密码" prop="pass">
                            <el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="确认密码" prop="checkPass">
                            <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="submitForm">提交</el-button>
                            <el-button @click="resetForm('ruleForm')">重置</el-button>
                        </el-form-item>
                    </el-form>
                </el-dialog>
                 <!--视图渲染-->
                <router-view/>


                <!--弹窗显示用户信息-->
                <el-dialog :visible.sync="userinfoDialogVisible" width="30%">
                    <el-form ref="infoForm" :model="infoForm" >
                        <el-form-item label="头像" prop="url"  style="width: 75% ;margin: auto">
                            <el-upload
                                    class="avatar-uploader"
                                    action="/upload"
                                    :show-file-list="false"
                                    :on-success="handleAvatarSuccessId"
                                    :before-upload="beforeAvatarUpload">
                                <img v-if="infoForm.url" :src="infoForm.url" class="avatar" >
                                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                            </el-upload>
                        </el-form-item>
                        <el-form-item label="用户账号" label-width="90px">
                            <el-input v-model="infoForm.username" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="电话" label-width="90px">
                            <el-input v-model="infoForm.tel" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="地址" label-width="90px">
                            <el-input v-model="infoForm.address" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="创建日期" label-width="90px">
                            <el-input v-model="infoForm.gmtCreate" autocomplete="off"></el-input>
                        </el-form-item>
                    </el-form>

                    <span slot="footer" class="dialog-footer">
                        <el-button type="primary" @click="updStu">确 定</el-button>
                  </span>
                </el-dialog>
<!--                <img src="/src/assets/logo.png" />-->
            </el-main>
        </el-container>
        <el-footer>Footer</el-footer>
    </el-container>
</template>

<script>
    import LeftMenu from "@/components/LeftMenu";
    export default {
        name: "Home",
        components:{
            LeftMenu
        },
        data(){
            var validatePass = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入密码'));
                } else {
                    if (this.ruleForm.checkPass !== '') {
                        this.$refs.ruleForm.validateField('checkPass');
                    }
                    callback();
                }
            }
            var validatePass2 = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请再次输入密码'));
                } else if (value !== this.ruleForm.pass) {
                    callback(new Error('两次输入密码不一致!'));
                } else {
                    callback();
                }
            }
           return {
               //用户信息
               infoForm:{},
               leftMenus:[],
               //登录者头像
               loginAvatar:"",
               //用户信息弹出框
               userinfoDialogVisible:false,

               rules:{
                   pass: [
                       { validator: validatePass, trigger: 'blur' }
                   ],
                   checkPass: [
                       { validator: validatePass2, trigger: 'blur' }
                   ],
               },

//修改密码
               ruleForm:{
                   pass: '',
                   checkPass: '',
               },
               //修改密码弹框状态
               updatePasswordDialogVisible:false,
           }
        },
        created() {
            this.initLeftMenu();
            this.initLoginAvatar();

        },
        methods: {
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isPNG = file.type === 'image/png';
                const isLt20M = file.size / 1024 / 1024 < 20;
                if (!isJPG&&!isPNG) {
                    this.$message.error('上传头像图片只能是 JPG或PNG 格式!');
                }
                if (!isLt20M) {
                    this.$message.error('上传头像图片大小不能超过 20MB!');
                }
                return (isJPG || isPNG) && isLt20M;
            },
            //个人信息弹出框头像
            handleAvatarSuccessId(res){
                //回显图片
                this.infoForm.url=res.data;
            },
           //拿到登录者头像
            initLoginAvatar(){
                this.$http.post("/user/user/loginAvater").then(result=>{
                    console.log("666666666666")
                    console.log(result)
                    if(result.data.code===2000){
                        this.loginAvatar=result.data.data;
                    }

                })
            },
            initLeftMenu(){
                this.$http.get("/permission/permission/leftPermission").then(result=>{
                      if(result.data.code===2000){
                           this.leftMenus=result.data.data;
                      }
                })
            },
            //修改用户信息
            updStu(){

            },
            //修改密码
            submitForm() {
                this.$refs['ruleForm'].validate((valid) => {
                    if (valid) {
                        console.log("修改密码")
                        this.$http.post("/user/user/updatePassword",this.ruleForm).then(result=>{
                            console.log(result)
                            console.log("////////////////////////////")
                            if(result.data.code===2000){
                                this.$message.success(result.data.msg);
                                this.updatePasswordDialogVisible=false;
                                this.$router.push("/login")
                            }
                        })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            //拿到用户信息
            getInfo() {
                console.log("222222")
                this.$http.post("/user/user/getInfo").then(result=> {
                    console.log(result)
                    console.log("11111111111111")
                    if(result.data.code===2000){
                        this.infoForm=result.data.data;
                        this.userinfoDialogVisible=true;
                    }
                })
            },
            //拉下得触发事件
            handleCommand(command) {
                console.log("cccccccccccccc")
                if (command === 'logout') {
                    //1.退出的方法

                    this.$http.post("/sso/logout").then(result => {
                        if (result.data.code === 2000) {
                            sessionStorage.clear();
                            this.$router.push("/login")
                        }
                    })
                }else if(command ==='info'){
                    this.getInfo();

                }else if(command ==='updatePassword'){
                    this.updatePasswordDialogVisible = true
                }
            },
            //
            // //重置方法
            resetForm() {
                this.$refs['ruleForm'].resetFields();
            },
        }
    }
</script>
<!--当前vue有效-->
<style>
    html, body, #app {
        height: 100%;
    }

    body, #app {
        padding: 0px;
        margin: 0px;
    }

    .el-container {
        height: 100%;
    }

    .el-header, .el-footer {
        background-color: grey;
        color: #333;
        line-height: 60px;
    }

    .el-aside {
        background-color: darkgrey;
        color: #333;
        line-height: 560px;
    }

    .el-aside > .el-menu {
        border: none;
    }

    .el-main {
        background-color: lightgrey;
        color: darkolivegreen;
    }

    body > .el-container {
        margin-bottom: 40px;
    }

    .el-container:nth-child(5) .el-aside,
    .el-container:nth-child(6) .el-aside {
        line-height: 260px;
    }

    .el-container:nth-child(7) .el-aside {
        line-height: 320px;
    }
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }
    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
</style>